<!--
 * @Author: ChaiHongJun
 * @Date: 2021-04-09 14:02:58
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-05-03 14:28:30
 * @version: 
 * @Description:播放器组件
-->
<template>
  <transition name="el-fade-in-linear">
    <div class="player-bar shadow flex-row" v-if="getShowPlayer">
      <div class="avatar" v-if="tracks[getPlayingIndex]">
        <img alt="nicemusic" :src="tracks[getPlayingIndex].al.picUrl" />
      </div>
      <div class="info" v-if="tracks[getPlayingIndex]">
        <!--歌名-->
        <h2 class="ellipsis">{{ tracks[getPlayingIndex].name }}</h2>
        <!--歌手-->
        <p class="ellipsis">{{ tracks[getPlayingIndex].ar[0].name }}</p>
      </div>
      <div class="player-btn">
        <!-- 上一首 -->
        <i class="iconfont icon-prev niceshangyishou" @click="previous"></i>
        <!-- 播放 / 暂停 -->
        <i
          class="iconfont icon-play"
          @click="playPause"
          :class="playOrPause"
        ></i>
        <!-- 下一首 -->
        <i class="iconfont icon-next nicexiayishou" @click="next"></i>
      </div>
      <div id="progress-wrap" class="progress-wrap">
        <p class="current-time">{{ formatSongDuration(currentTime * 1000) }}</p>
        <!-- 播放器进度条 -->
        <div class="progress-bar-wrap">
          <div class="progress-bar">
            <el-progress
              :percentage="percent"
              v-if="!isNaN(percent)"
              :color="progressColor"
              :show-text="false"
            ></el-progress>
          </div>
        </div>
        <p class="duration-time" v-if="tracks[getPlayingIndex]">
          {{ formatSongDuration(tracks[getPlayingIndex].dt) }}
        </p>
      </div>
      <!-- 音量控制 -->
      <div class="volume-wrap">
        <!-- 静音调整 -->
        <i
          class="iconfont volume-icon"
          :class="isMuted"
          @click="changeMute"
        ></i>
        <div class="progress-bar">
          <el-slider
            v-model="volumeInit"
            :show-tooltip="true"
            class="bar-inner"
            style="width: 100%"
            @change="changeVolume"
          ></el-slider>
        </div>
      </div>
      <div class="tool">
        <!-- 播放模式 循环播放   单曲循环  随机播放 -->
        <i class="iconfont" :class="playModeClass" @click="changePlayMode"></i>
        <!-- 显示歌词 -->
        <i class="iconfont nicegeci32"></i>
        <!-- 显示历史播放列表 -->
        <i class="iconfont nicebofangliebiao24" @click="showPlaylist"></i>
      </div>
      <audio
        ref="audioPlayer"
        :src="tracks[getPlayingIndex].audioSrc"
        v-if="tracks[getPlayingIndex]"
        @ended="handleAudioEnd"
        @timeupdate="handlerTimeUpdate"
      ></audio>
      <div class="lyric-box playlist-box shadow" v-show="getShowHistoryQueue">
        <div class="title flex-between">
          播放列表
          <i
            class="iconfont nicelajitong"
            alt="清空"
            title="清空"
            @click="clearHistoryPlayList"
          ></i>
        </div>
        <!-- 这里是历史播放列表 -->
        <div class="list">
          <div
            class="item flex-row"
            v-for="(item, index) of getHistoryQueue"
            :key="index"
          >
            <div class="index-container flex-center">
              <span class="num">{{ covetDigitToDouble(index + 1) }}</span>
              <div class="play-icon">
                <div class="line" style="animation-delay: -1.2s"></div>
                <div class="line"></div>
                <div class="line" style="animation-delay: -1.5s"></div>
                <div class="line" style="animation-delay: -0.9s"></div>
                <div class="line" style="animation-delay: -0.6s"></div>
              </div>
              <i class="iconfont nicebofang2 play-btn"></i>
              <i class="iconfont nicezanting1 pause-btn"></i>
            </div>
            <p class="ellipsis">{{ item.name }}</p>
            <i
              class="iconfont niceIcon_cloose"
              @click="removeFromHistory(item, index)"
            ></i>
          </div>
        </div>
        <div class="foot"></div>
      </div>
    </div>
  </transition>
</template>
<script>
import {
  formatSongDuration,
  covetDigitToDouble,
  generatingRandom,
} from "@/utils/index.js";
import { mapGetters } from "vuex";
export default {
  props: {
    tracks: {
      Type: Array,
    },
  },
  data() {
    return {
      // trackslist: [],
      progressColor: "#fa2800",
      // currentIndex: 0,
      volumeInit: 50,
      // volume: this.$refs.audioPlayer.volume,
      currentTime: 0, //当前歌曲已经播放时间 单位秒
    };
  },
  // watch: {
  //   tracks() {
  //     this.trackslist = this.tracks;

  //     console.log(this.tracks);
  //   },
  // },
  computed: {
    ...mapGetters([
      "getPlayingQueue",
      "getShowHistoryQueue",
      "getShowPlayer",
      "getPlaylist",
      "getHistoryQueue",
      "getPlayMode",
      "getPlayStatus",
      "getMuted",
      "getPlayingIndex",
      "getPlaylistLength",
    ]),
    // 当前播放时间
    //播放器进度条
    percent() {
      // if (this.tracks[this.getPlayingIndex].dt) {
      //   return (
      //     (this.currentTime * 100000) / this.tracks[this.getPlayingIndex].dt
      //   );
      // }
      return 0;
    },

    playModeClass() {
      if (this.getPlayMode === 0) {
        //循环
        return "nicexunhuanbofang24";
      } else if (this.getPlayMode === 1) {
        // 单曲循环
        return "nicebofangqidanquxunhuan";
      } else {
        //随机
        return "nicebofangqisuijibofang";
      }
    },
    //是否静音
    isMuted() {
      return this.getMuted ? "nicejingyin1" : "niceshengyin1";
    },
    // 播放或暂停的样式
    playOrPause() {
      return this.getPlayStatus ? "nicezanting1" : "nicebofang2";
    },
    formatSongDuration() {
      return (originalData) => {
        return formatSongDuration(originalData);
      };
    },
    covetDigitToDouble() {
      return (originalData) => {
        return covetDigitToDouble(originalData);
      };
    },
  },
  mounted() {},

  // updated() {
  //   // 可以在updated 阶段通过ref获取DOM
  //   console.log("updated");
  //   if (this.getPlayStatus) {
  //     this.$refs.audioPlayer.play();
  //   } else {
  //     this.$refs.audioPlayer.pause();
  //   }
  // },
  methods: {
    //  handlerTimeUpdate
    handlerTimeUpdate(e) {
      this.currentTime = e.target.currentTime;
    },
    //当前播放的歌曲结束后
    handleAudioEnd() {
      console.log("播放完毕");
      //判断 播放模式
      if (this.getPlayMode === 0) {
        console.log("循环播放");
        // 全部循环 ，播放索引加1
        this.$store.commit("SET_TRACK_INDEX", this.getPlayingIndex + 1);
      } else if (this.getPlayMode === 1) {
        console.log("单曲循环");
        // 单曲循环 ，继续播放当前歌曲
        this.$store.commit("SET_TRACK_INDEX", this.getPlayingIndex);
      } else {
        // 随机播放
        console.log("随机播放");
        this.$store.commit(
          "SET_TRACK_INDEX",
          generatingRandom(
            0,
            this.getPlaylistLength - 1,
            this.getPlaylistLength
          )
        );
      }
      this.$store.commit("PLAY_OR_PAUSE", true);
      this.$refs.audioPlayer.play();

      console.log("播放状态：" + this.getPlayStatus);

      console.log("当前播放歌曲：");
      console.log(this.tracks[this.getPlayingIndex]);
    },
    //才播放历史删除
    removeFromHistory(track, index) {
      // 从历史播放列表删除本条记录
      this.$store.commit("REMOVE_FROM_HISTORY", index);
    },
    // 静音状态
    changeMute() {
      if (this.getMuted) {
        //如果是静音的改成不静音
        this.$store.commit("SET_MUTE", false);
        this.$refs.audioPlayer.muted = false;
      } else {
        this.$store.commit("SET_MUTE", true);
        this.$refs.audioPlayer.muted = true;
      }
    },
    //改变音量
    changeVolume(volume) {
      this.$refs.audioPlayer.volume = volume / 100;
    },
    //播放模式切换
    changePlayMode() {
      if (this.getPlayMode === 0) {
        //从全循环变成单曲循环
        this.$store.commit("SET_PLAYMODE", 1);
      } else if (this.getPlayMode === 1) {
        // 从单曲循环变成随机
        this.$store.commit("SET_PLAYMODE", 2);
      } else {
        //从随机变成 全循环
        this.$store.commit("SET_PLAYMODE", 0);
      }
    },
    //清空历史播放列表
    clearHistoryPlayList() {
      this.$store.commit("CLEARALL_HISTORY_PLAYLIST", []);
    },
    //返回 设置 音量值
    getVolume() {
      // console.log("音量大小：" + value);
      // // this.$refs.audioPlayer.volume = value / 100;
      // console.log(this.$refs.audioPlayer);
    },
    //显示播放列表
    showPlaylist() {
      if (this.getShowHistoryQueue == false) {
        this.$store.commit("SHOW_HISTORY_PLAYERLIST", true);
      } else {
        this.$store.commit("SHOW_HISTORY_PLAYERLIST", false);
      }
    },
    //播放或者暂停
    playPause() {
      if (this.getPlayStatus) {
        //表示点击暂停
        // 改成暂停状态
        this.$store.commit("PLAY_OR_PAUSE", false);
        this.$refs.audioPlayer.pause();
      } else {
        //表示点击播放
        // 改成播放状态
        this.$store.commit("PLAY_OR_PAUSE", true);
        // 如果历史播放列表不存在  则添加到历史播放列表
        if (
          this.getHistoryPlaylist.indexOf(
            this.getPlaylist[this.getPlayingIndex]
          )
        ) {
          this.$store.commit(
            "SET_HISTORY_PLAYLIST",
            this.getPlaylist[this.getPlayingIndex]
          );
        }
        //播放音乐
        this.$refs.audioPlayer.play();
      }

      console.log("当前播放歌曲：");
      console.log(this.tracks[this.getPlayingIndex]);
    },
    //前一首
    previous() {
      console.log("前一首");
      /*  改变播放歌曲的索引  */
      // 如果是循环播放  或 单曲循环
      if (this.getPlayMode == 0 || this.getPlayMode == 1) {
        if (
          this.getPlayingIndex > 0 &&
          this.getPlayingIndex <= this.getPlaylistLength - 1
        ) {
          this.$store.commit("SET_TRACK_INDEX", this.getPlayingIndex - 1);
        } else if (this.getPlayingIndex == 0) {
          this.$store.commit("SET_TRACK_INDEX", this.getPlaylistLength - 1);
        }
      }
      //如果是随机播放
      else if (this.getPlayMode == 2) {
        this.$store.commit(
          "SET_TRACK_INDEX",
          generatingRandom(
            0,
            this.getPlaylistLength - 1,
            this.getPlaylistLength
          )
        );
      }
      this.$store.commit("PLAY_OR_PAUSE", true);
      this.$refs.audioPlayer.play();

      console.log("当前播放歌曲：");
      console.log(this.tracks[this.getPlayingIndex]);
    },
    // 下一首
    next() {
      console.log("下一首");
      /*  改变播放歌曲的索引  */
      // 如果是循环播放  或 单曲循环
      if (this.getPlayMode == 0 || this.getPlayMode == 1) {
        if (
          this.getPlayingIndex >= 0 &&
          this.getPlayingIndex < this.getPlaylistLength - 1
        ) {
          this.$store.commit("SET_TRACK_INDEX", this.getPlayingIndex + 1);
        } else if (this.getPlayingIndex == this.getPlaylistLength - 1) {
          this.$store.commit("SET_TRACK_INDEX", 0);
        }
        /*  当前播放歌曲 添加到历史播放列表 */
        if (this.getPlayStatus) {
          this.$store.commit(
            "SET_HISTORY_PLAYLIST",
            this.getPlaylist[this.getPlayingIndex]
          );
        } else {
          // 当前没有在播放
          // this.$store.commit("PLAY_OR_PAUSE", false);
          // this.$refs.audioPlayer.pause();
          console.log("暂停状态什么都不做");
        }
      }
      //如果是随机播放
      else if (this.getPlayMode == 2) {
        this.$store.commit(
          "SET_TRACK_INDEX",
          generatingRandom(
            0,
            this.getPlaylistLength - 1,
            this.getPlaylistLength
          )
        );
        /*  当前播放歌曲 添加到历史播放列表 */
        if (this.getPlayStatus) {
          this.$store.commit(
            "SET_HISTORY_PLAYLIST",
            this.getPlaylist[this.getPlayingIndex]
          );
        } else {
          // 当前没有在播放
          // this.$store.commit("PLAY_OR_PAUSE", false);
          // this.$refs.audioPlayer.pause();
          console.log("暂停状态什么都不做");
        }
      }
      // this.$store.commit("PLAY_OR_PAUSE", true);
      // this.$refs.audioPlayer.play();

      console.log("当前播放歌曲：");
      console.log(this.tracks[this.getPlayingIndex]);
    },
  },
};
</script>
<style lang="stylus" scoped>
.fade-enter {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.fade-enter-active {
  transition: all 0.5s;
}

.fade-leave-to {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.fade-leave-active {
  transition: all 0.5s;
}

.player-bar {
  width: 100%;
  height: 72px;
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 8000;
  padding: 0 10px 0 20px;
  justify-content: space-between;

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-right: 30px;
    flex-shrink: 0;

    img {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
  }

  .info {
    margin-right: 15px;
    flex-shrink: 0;
    width: 120px;

    h2 {
      font-size: 14px;
      color: #333;
      margin-bottom: 15px;
    }

    p {
      font-size: 12px;
      color: #999999;
    }
  }

  .player-btn {
    display: flex;
    align-items: center;

    i {
      cursor: pointer;

      &:active {
        opacity: 0.8;
      }
    }

    .icon-prev {
      font-size: 40px;
    }

    .icon-play {
      font-size: 60px;
      margin: 0 10px;
    }

    .icon-next {
      font-size: 40px;
    }
  }

  .progress-wrap {
    width: 650px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 80px;
    flex: 1;

    p {
      font-size: 14px;
    }

    .progress-bar-wrap {
      width: 100%;
      margin: 0 20px;
    }

    .el-progress {
      width: 100%;
    }
  }

  .volume-wrap {
    width: 180px;
    margin-left: 40px;
    display: flex;
    align-items: center;
    margin-right: 80px;

    .volume-icon {
      font-size: 26px;
      font-weight: bold;
      cursor: pointer;
    }

    .progress-bar {
      position: relative;
      width: 100%;
      flex: 1;
      height: 2px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 2px;
      cursor: pointer;
      margin-left: 10px;

      .bar-inner {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;

        .progress {
          width: 50px;
          background: $color-theme;
          height: 2px;
          border-radius: 2px;
        }

        .progress-btn {
          position: absolute;
          z-index: 100;
          right: -4px;
          width: 10px;
          height: 10px;
          top: -4.5px;
          background: $color-theme;
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
          border-radius: 50%;

          &::after {
            position: absolute;
            content: ' ';
            top: 50%;
            left: 50%;
            margin: -3px 0 0 -3px;
            width: 6px;
            height: 6px;
            background: #ffffff;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .tool {
    .iconfont {
      font-size: 26px;
      margin: 0 15px;
      cursor: pointer;

      &:active {
        opacity: 0.7;
      }

      &.icon-like {
        font-size: 26px;
      }
    }
  }

  .lyric-box {
    width: 360px;
    height: 580px;
    position: absolute;
    right: 0;
    bottom: 80px;
    border-radius: 3px;
    padding: 30px;
    overflow: hidden;

    .title {
      margin: 10px 0 30px;
      font-weight: 500;
      font-size: 16px;

      i {
        font-size: 20px;
        cursor: pointer;

        &:hover {
          color: $color-theme;
        }
      }

      .clearBtn {
        font-size: 16px;
        color: $color-theme;
        cursor: pointer;
      }
    }

    .lyric {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 430px;
      overflow: hidden;

      .lyric-wrapper {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;

        .lyric-text {
          margin: 5px 0;
          line-height: 24px;
          font-size: 14px;
          font-weight: 300;

          &.active {
            color: $color-theme;
          }
        }
      }
    }
  }

  .playlist-box {
    width: 460px;

    .list {
      overflow-y: scroll;
      max-height: calc(100% - 90px);

      .item {
        padding: 8px 0;
        height: 40px;

        .index-container {
          width: 30px;
          margin-right: 20px;
          flex-shrink: 0;

          .num {
            font-size: 14px;
            color: #4a4a4a;
          }

          .play-icon {
            display: none;
            height: 16px;
            min-width: 18px;
            overflow: hidden;

            .line {
              width: 2px;
              height: 100%;
              margin-left: 2px;
              background-color: #ff410f;
              animation: play 0.9s linear infinite alternate;
            }
          }

          .play-btn {
            color: $color-theme;
            font-size: 28px;
            display: none;
            text-align: left;
            cursor: pointer;
          }

          .pause-btn {
            color: $color-theme;
            font-size: 30px;
            display: none;
            text-align: left;
            cursor: pointer;
          }
        }

        p {
          cursor: pointer;
          flex: 1;
          margin-right: 20px;

          &.active {
            color: $color-theme;
          }
        }

        i {
          font-size: 20px;
          cursor: pointer;

          &:hover {
            color: $color-theme;
          }
        }

        &.playing {
          p {
            color: $color-theme;
          }

          i {
            color: $color-theme;
          }

          .index-container {
            .num {
              display: none;
            }

            .play-icon {
              display: flex;
            }

            .play-btn {
              display: none;
            }
          }
        }

        &:hover {
          .index-container {
            .num {
              display: none;
            }

            .play-btn {
              display: block;
            }
          }

          &.playing {
            .index-container {
              .play-btn {
                display: none;
              }

              .play-icon {
                display: none;
              }

              .pause-btn {
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
</style>